<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>轮播组件 carousel - Layui 文档</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script>;!function(){self!==parent&&(location.href="about:blank")}();</script>
  <link href="/public/layui/v/2.8.6/css/layui.css" rel="stylesheet">
  <link href="/public/static/dist/docs/2.8/css/global.css?v=16" rel="stylesheet">
  <script>
  (function(){if(window.JSON&&window.JSON.parse){var c=document.getElementsByTagName("head"),a=document.createElement("link");try{var b=JSON.parse(localStorage.layui)}catch(d){b={}}"dark"===b.themeMode&&(a.href="//res.sentcss.com/static/dist/docs/2.8/css/layui-theme-dark.css?v=16",a.rel="stylesheet",a.id="layuicss-theme-dark",c[0].appendChild(a))}})();
  </script>
</head>
<body>
<div class="layui-header ws-header ws-bg-light">
  <div class="layui-container">
    <div class="ws-logo">
      <a class="logo" href="../../../index.html">
        <img src="/public/static/images/layui/logo.png" alt="layui">
      </a>
    </div>
    <div class="ws-header-assist">
      <div class="layui-form layui-hide-xs ws-search" lay-filter="LAY-ws-header-component"></div>
      <div class="layui-hide-xs ws-notice"></div>
    </div>
    
    <div class="ws-header-menu">
      <ul class="layui-nav layui-bg-gray ws-bg-light" id="LAY_NAV_TOP">
        <li class="layui-nav-item" data-dir="docs">
          <a href="../index.html">组件</a> 
        </li>
        <li class="layui-nav-item" data-dir="notes">
          <a href="../../../notes/index.html">笔记</a> 
        </li>
        <li class="layui-nav-item layui-hide-xs">
          <a href="https://gitee.com/layui/layui/issues" target="_blank" rel="nofollow">社区</a>
        </li>
        <li class="layui-nav-item">
          <a href="javascript:;">
            <!--<span class="layui-badge-dot" style="left:0; right: auto; margin: -4px 0 0 5px;"></span>--> 
            生态
          </a>
          <dl class="layui-nav-child layui-nav-child-r" style="margin-right: -21px;">  
            <dd class="layui-hide-sm layui-show-xs" lay-unselect>
              <a href="https://gitee.com/layui/layui/issues" target="_blank" rel="nofollow">社区</a>
              <hr>
            </dd>
            <dd lay-unselect>
              <a href="https://dev.layuion.com/extend/" target="_blank">Layui 第三方扩展组件</a>
            </dd>
            <dd lay-unselect>
              <a href="https://github.com/Sight-wcg/layui-theme-dark" target="_blank" lay-unselect>
                Layui 深色主题 <span>(社区贡献)</span>
              </a>
            </dd>
            <dd lay-unselect>
              <a href="https://gitee.com/layui/layui-vue/" target="_blank" lay-unselect>
                Layui of Vue <span>(他人实现)</span>
              </a>
            </dd>
          </dl>
        </li>
        <li class="layui-nav-item">
          <a href="javascript:;">2.8.6</a>
          <dl class="layui-nav-child layui-nav-child-c">  
            <dd lay-unselect class="layui-this"><a href="../../../index.html">2.8.6</a></dd>
            <dd lay-unselect><a href="../../../2.7/index.html">2.7.6</a></dd>
          </dl>
        </li>
      </ul>
      <div class="ws-header-more">
        <i class="layui-icon layui-icon-shrink-right"></i>
      </div>
      <div class="ws-header-tool ws-bg-light">
        <div class="layui-form ws-header-theme" lay-filter="header-theme">
          <input type="checkbox" name="theme-mode" id="ID-header-theme-mode" lay-filter="header-theme-mode" lay-skin="switch">
          <div lay-checkbox>
            <i class="layui-icon layui-icon-moon"></i> | 
            <i class="layui-icon layui-icon-light"></i>
          </div>
        </div>
        <div>
          <a href="https://github.com/layui/layui" target="_blank" title="Github">
            <i class="layui-icon layui-icon-github layui-font-20"></i>
          </a>
        </div>
        <div>
          <a href="https://gitee.com/layui/layui" target="_blank" title="Gitee">
            <i class="layui-icon layui-icon-gitee layui-font-20" style="color: #C71D23;"></i>
            <!--<img src="https://gitee.com/static/images/logo-en.svg" width="21">-->
          </a>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- 让 IE8/9 兼容响应式栅格 -->
<!--[if lt IE 9]>
  <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
  <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
 
<div class="layui-container ws-container">
  
<div class="layui-panel ws-menu">
  <ul class="layui-menu layui-menu-lg ws-docs-menu">
    <li class="layui-menu-item-group" lay-options="{type: 'group', isAllowSpread: true}">
      <div class="layui-menu-body-title">基础</div>
      <ul>
        <li>
          <div class="layui-menu-body-title">
            <a href="../index.html">
              <span>开始使用</span> 
              <span class="layui-font-12 layui-font-gray">Getting Started</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../base.html">
              <span>底层方法</span>
              <span class="layui-font-12 layui-font-gray">Base Function</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../modules.html">
              <span>模块系统</span>
              <span class="layui-font-12 layui-font-gray">Modules</span>
              <span class="layui-badge-dot layui-bg-green"></span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../versions.html">
              <span>更新日志</span>
              <span class="layui-font-12 layui-font-gray">Versions</span>
              <span class="layui-badge-dot"></span>
            </a>
          </div>
        </li>
      </ul>
    </li>
    <li class="layui-menu-item-group" lay-options="{type: 'group', isAllowSpread: true}">
      <div class="layui-menu-body-title">布局</div>
      <ul>
        <li>
          <div class="layui-menu-body-title">
            <a href="../layout/index.html">
              <span>框体</span>
              <span class="layui-font-12 layui-font-gray">Layout</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../layout/grid.html">
              <span>栅格</span>
              <span class="layui-font-12 layui-font-gray">Grid</span>
            </a>
          </div>
        </li>
      </ul>
    </li>
    <li class="layui-menu-item-group" lay-options="{type: 'group', isAllowSpread: true}">
      <div class="layui-menu-body-title">通用</div>
      <ul>
        <li>
          <div class="layui-menu-body-title">
            <a href="../color/index.html">
              <span>颜色</span>
              <span class="layui-font-12 layui-font-gray">Color</span>
              <span class="layui-badge-dot layui-bg-green"></span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../button/index.html">
              <span>按钮</span>
              <span class="layui-font-12 layui-font-gray">Button</span>
              <span class="layui-badge-dot layui-bg-green"></span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../icon/index.html">
              <span>图标</span>
              <span class="layui-font-12 layui-font-gray">Icon</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../anim/index.html">
              <span>动画</span>
              <span class="layui-font-12 layui-font-gray">Anim</span>
            </a>
          </div>
        </li>
      </ul>
    </li>
    <li class="layui-menu-item-group" lay-options="{type: 'group', isAllowSpread: true}">
      <div class="layui-menu-body-title">表单</div>
      <ul>
        <li>
          <div class="layui-menu-body-title">
            <a href="../form/index.html">
              <span>表单组件</span>
              <span class="layui-font-12 layui-font-gray">Form</span>
              <span class="layui-badge-dot layui-bg-green"></span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../form/input.html">
              <span>输入框</span>
              <span class="layui-font-12 layui-font-gray">Input / Textarea</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../form/select.html">
              <span>选择框</span>
              <span class="layui-font-12 layui-font-gray">Select</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../form/checkbox.html">
              <span>复选框</span>
              <span class="layui-font-12 layui-font-gray">Checkbox</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../form/radio.html">
              <span>单选框</span>
              <span class="layui-font-12 layui-font-gray">Radio</span>
            </a>
          </div>
        </li>
      </ul>
    </li>
    <li class="layui-menu-item-group" lay-options="{type: 'group', isAllowSpread: true}">
      <div class="layui-menu-body-title">展示</div>
      <ul>
        <li>
          <div class="layui-menu-body-title">
            <a href="../table/index.html">
              <span>表格</span>
              <span class="layui-font-12 layui-font-gray">Table</span>
              <span class="layui-badge-dot layui-bg-green"></span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../laypage/index.html">
              <span>分页</span>
              <span class="layui-font-12 layui-font-gray">Laypage</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../treeTable/index.html">
              <span>树形表格</span>
              <span class="layui-font-12 layui-font-gray">TreeTable</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../nav/index.html">
              <span>导航菜单</span>
              <span class="layui-font-12 layui-font-gray">Nav</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../menu/index.html">
              <span>基础菜单</span>
              <span class="layui-font-12 layui-font-gray">Menu</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../tab/index.html">
              <span>选项卡</span>
              <span class="layui-font-12 layui-font-gray">Tab</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../badge/index.html">
              <span>徽章</span>
              <span class="layui-font-12 layui-font-gray">Badge</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../auxiliar/index.html">
              <span>辅助</span>
              <span class="layui-font-12 layui-font-gray">Blockquote / Fieldset / hr</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../class/index.html">
              <span>公共类</span>
              <span class="layui-font-12 layui-font-gray">Class</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../panel/index.html">
              <span>面板</span>
              <span class="layui-font-12 layui-font-gray">Panel / Card / Collapse</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../progress/index.html">
              <span>进度条</span>
              <span class="layui-font-12 layui-font-gray">Progress</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../timeline/index.html">
              <span>时间线</span>
              <span class="layui-font-12 layui-font-gray">Timeline</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../fixbar/index.html">
              <span>固定条</span>
              <span class="layui-font-12 layui-font-gray">Fixbar</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../tree/index.html">
              <span>树组件</span>
              <span class="layui-font-12 layui-font-gray">Tree</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="index.html">
              <span>轮播</span>
              <span class="layui-font-12 layui-font-gray">Carousel</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../flow/index.html">
              <span>流加载</span>
              <span class="layui-font-12 layui-font-gray">Flow</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../code/index.html">
              <span>代码预览组件</span>
              <span class="layui-font-12 layui-font-gray">Code</span>
            </a>
          </div>
        </li>
      </ul>
    </li>
    <li class="layui-menu-item-group" lay-options="{type: 'group', isAllowSpread: true}">
      <div class="layui-menu-body-title">交互</div>
      <ul>
        <li>
          <div class="layui-menu-body-title">
            <a href="../layer/index.html">
              <span>弹出层</span>
              <span class="layui-font-12 layui-font-gray">Layer</span>
              <span class="layui-badge-dot layui-bg-green"></span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../laydate/index.html">
              <span>日期与时间选择</span>
              <span class="layui-font-12 layui-font-gray">Laydate</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../upload/index.html">
              <span>上传</span>
              <span class="layui-font-12 layui-font-gray">Upload</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../dropdown/index.html">
              <span>下拉菜单</span>
              <span class="layui-font-12 layui-font-gray">Dropdown</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../colorpicker/index.html">
              <span>颜色选择器</span>
              <span class="layui-font-12 layui-font-gray">Colorpicker</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../transfer/index.html">
              <span>穿梭框</span>
              <span class="layui-font-12 layui-font-gray">Transfer</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../slider/index.html">
              <span>滑块</span>
              <span class="layui-font-12 layui-font-gray">Slider</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../rate/index.html">
              <span>评分</span>
              <span class="layui-font-12 layui-font-gray">Rate</span>
            </a>
          </div>
        </li>
      </ul>
    </li>
    <li class="layui-menu-item-group" lay-options="{type: 'group', isAllowSpread: true}">
      <div class="layui-menu-body-title">其他</div>
      <ul>
        <li>
          <div class="layui-menu-body-title">
            <a href="../laytpl/index.html">
              <span>模板引擎</span>
              <span class="layui-font-12 layui-font-gray">Laytpl</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../util/index.html">
              <span>工具模块</span>
              <span class="layui-font-12 layui-font-gray">Util</span>
            </a>
          </div>
        </li>
      </ul>
    </li>
    
  </ul>
</div>

  <div class="ws-content">
    <div class="layui-text ws-text" id="WS-text">
      <h1>轮播组件</h1>
<blockquote class="layui-elem-quote">
<p>轮播组件 <code>carousel</code> 主要适用于跑马灯/轮播等交互场景。它并非单纯地为焦点图而生，准确地说，它可以满足任何内容的轮播式切换操作，亦可胜任 <code>fullpage</code>（全屏上下轮播）的需求。</p>
</blockquote class="layui-elem-quote">
<h2 id="examples" lay-toc="{anchor: null}" style="margin-bottom: 0;">示例</h2>
<style>
/* 为了区分效果 */
div[carousel-item]>*{text-align: center; line-height: 280px; color: #fff;}
div[carousel-item]>*:nth-child(2n){background-color: #16b777;}
div[carousel-item]>*:nth-child(2n+1){background-color: #16baaa;}
</style>
<div>
<h3 lay-toc="{level: 2, id: 'examples'}" class="layui-hide">常规用法</h3>
<pre class="layui-code" lay-options="{preview: true, codeStyle: 'height: 515px;', text: {preview: '常规用法'}, layout: ['preview', 'code'], tools: ['full']}">
  <textarea>
<div class="layui-carousel" id="ID-carousel-demo-1">
  <div carousel-item>
    <div>条目1</div>
    <div>条目2</div>
    <div>条目3</div>
    <div>条目4</div>
    <div>条目5</div>
  </div>
</div> 
 
<hr class="ws-space-16">
 
<div class="layui-carousel" id="ID-carousel-demo-2">
  <div carousel-item>
    <div>条目1</div>
    <div>条目2</div>
  </div>
</div>
<!-- import layui --> 
<script>
layui.use(function(){
  var carousel = layui.carousel;
  // 渲染 - 常规轮播
  carousel.render({
    elem: '#ID-carousel-demo-1',
    width: 'auto'
  });
  
  // 渲染 - 设置时间间隔、动画类型、宽高度等属性
  carousel.render({
    elem: '#ID-carousel-demo-2',
    interval: 1800,
    anim: 'fade',
    width: 'auto',
    height: '120px'
  });
});
</script>
  </textarea>
</pre>
<ul>
<li>在元素外层设置 <code>class=&quot;layui-carousel&quot;</code> 来定义一个轮播容器</li>
<li>在元素内层设置属性 <code>carousel-item</code> 用来定义条目容器</li>
</ul>
<h3 id="demo-config" lay-toc="{level: 2, hot: true}">属性配置预览</h3>
<pre class="layui-code" lay-options="{preview: true, codeStyle: 'height: 515px;', layout: ['preview', 'code'], tools: ['full'], done: function(obj){
  obj.render();
}}">
  <textarea>
<div class="layui-form">
  <div class="layui-form-item">
    <div class="layui-inline">
      <label class="layui-form-label">宽高</label>
      <div class="layui-input-inline" style="width: 98px;">
        <input type="tel" name="width" value="600" autocomplete="off" placeholder="width" class="layui-input carousel-demo-set">
      </div>
      <div class="layui-input-inline" style="width: 98px;">
        <input type="tel" name="height" value="280" autocomplete="off" placeholder="height" class="layui-input carousel-demo-set">
      </div>
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">动画类型</label>
    <div class="layui-input-block">
      <div class="layui-btn-group" style="margin-top: 5px;">
        <button class="layui-btn layui-btn-sm" style="background-color: #16b777;" lay-on="carousel-set" data-key="anim" data-value="default">左右切换</button>
        <button class="layui-btn layui-btn-sm" lay-on="carousel-set" data-key="anim" data-value="updown">上下切换</button>
        <button class="layui-btn layui-btn-sm" lay-on="carousel-set" data-key="anim" data-value="fade">渐隐渐显</button>
      </div> 
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">箭头状态</label>
    <div class="layui-input-block">
      <div class="layui-btn-group" style="margin-top: 5px;">
        <button class="layui-btn layui-btn-sm" style="background-color: #16b777;" lay-on="carousel-set" data-key="arrow" data-value="hover">悬停显示</button>
        <button class="layui-btn layui-btn-sm" lay-on="carousel-set" data-key="arrow" data-value="always">始终显示</button>
        <button class="layui-btn layui-btn-sm" lay-on="carousel-set" data-key="arrow" data-value="none">不显示</button>
      </div> 
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">指示器位置</label>
    <div class="layui-input-block">
      <div class="layui-btn-group" style="margin-top: 5px;">
        <button class="layui-btn layui-btn-sm" style="background-color: #16b777;" data-key="indicator" lay-on="carousel-set" data-value="inside">容器内部</button>
        <button class="layui-btn layui-btn-sm" lay-on="carousel-set" data-key="indicator" data-value="outside">容器外部</button>
        <button class="layui-btn layui-btn-sm" lay-on="carousel-set" data-key="indicator" data-value="none">不显示</button>
      </div> 
    </div>
  </div>
  <div class="layui-form-item">
    <div class="layui-inline">
      <label class="layui-form-label">自动切换</label>
      <div class="layui-input-block">
        <!--<input type="checkbox" name="switch" lay-skin="switch" checked lay-text="ON|OFF" lay-filter="autoplay">-->
        <select lay-filter="autoplay">
          <option value="1">开启</option>
          <option value="0">关闭</option>
          <option value="always">always</option>
        </select>
      </div>
    </div>
    <div class="layui-inline">
      <label class="layui-form-label" style="width: auto;">时间间隔</label>
      <div class="layui-input-inline" style="width: 120px;">
        <input type="tel" name="interval" value="3000" autocomplete="off" placeholder="毫秒" class="layui-input carousel-demo-set">
      </div>
    </div>
  </div>
</div>
 
<div class="layui-carousel" id="ID-carousel-demo-set" lay-filter="filter-demo-carousel-set">
  <div carousel-item>
    <div>条目1</div>
    <div>条目2</div>
    <div>条目3</div>
    <div>条目4</div>
    <div>条目5</div>
  </div>
</div> 
<!-- import layui -->
<script>
layui.use(function(){
  var carousel = layui.carousel;
  var form = layui.form;
  var util = layui.util;
  var $ = layui.$;
  // 渲染
  var carInst = carousel.render({
    elem: '#ID-carousel-demo-set'
  });
  // 开关事件
  form.on('switch(autoplay)', function(){
    // 重载轮播
    carInst.reload({
      autoplay: this.checked
    });
  });
  // 自动播放控制
  form.on('select(autoplay)', function (obj) {
    // debugger;
    var autoplayValue = parseInt(obj.value);
    // 重载轮播
    carInst.reload({
      autoplay: isNaN(autoplayValue) ? obj.value : autoplayValue
    });
  });
  // 输入框事件
  $('.carousel-demo-set').on('input propertychange', function(){
    var value = this.value;
    var options = {};
    //if(!/^\d+$/.test(value)) return;
    
    options[this.name] = value;
    carInst.reload(options); // 重载轮播
  });
  // 普通事件
  util.on('lay-on', {
    "carousel-set": function(othis){
      var THIS = 'layui-bg-normal';
      var key = othis.data('key');
      var options = {};
      
      othis.css('background-color', '#16b777').siblings().removeAttr('style'); 
      options[key] = othis.data('value');
      carInst.reload(options); // 重载轮播
    }
  });
});
</script>
  </textarea>
</pre>
<h3 id="demo-image" lay-toc="{level: 2}">填充图片轮播</h3>
<pre class="layui-code" lay-options="{preview: true, layout: ['preview', 'code'], tools: ['full']}">
  <textarea>
<div class="layui-carousel" id="ID-carousel-demo-image">
  <div carousel-item>
    <div><img src="https://unpkg.com/outeres/demo/carousel/720x360-1.jpg"></div>
    <div><img src="https://unpkg.com/outeres/demo/carousel/720x360-2.jpg"></div>
    <div><img src="https://unpkg.com/outeres/demo/carousel/720x360-3.jpg"></div>
    <div><img src="https://unpkg.com/outeres/demo/carousel/720x360-4.jpg"></div>
    <div><img src="https://unpkg.com/outeres/demo/carousel/720x360-5.jpg"></div>
  </div>
</div>
<!-- import layui -->
<script>
layui.use(function(){
  var carousel = layui.carousel;
  // 渲染 - 图片轮播
  carousel.render({
    elem: '#ID-carousel-demo-image',
    width: '720px',
    height: '360px',
    interval: 3000
  });
});
</script>
  </textarea>
</pre>
</div>
<h2 id="api" lay-toc="{}">API</h2>
<table class="layui-table">
<thead>
<tr>
<th>API</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>var carousel = layui.carousel</td>
<td>获得 <code>carousel</code> 模块。</td>
</tr>
<tr>
<td><a href="index.html#render">var inst = carousel.render(options)</a></td>
<td>carousel 组件渲染，核心方法。</td>
</tr>
<tr>
<td><a href="index.html#reload">inst.reload(options)</a></td>
<td>轮播实例重载</td>
</tr>
<tr>
<td><a href="index.html#goto">inst.goto(index)</a> <sup>2.8+</sup></td>
<td>轮播切换到特定下标</td>
</tr>
</tbody>
</table class="layui-table">
<h2 id="render" lay-toc="{level: 2}">渲染</h2>
<p><code>carousel.render(options);</code></p>
<ul>
<li>参数 <code>options</code> : 基础属性配置项。<a href="index.html#options">#详见属性</a></li>
</ul>
<p>该方法返回一个实例对象，包含操作当前实例的相关方法成员。</p>
<pre><code class="layui-code">var inst = carousel.render(options);
console.log(inst); // 得到当前实例对象
</code></pre>
<h3 id="reload" lay-toc="{level: 2}">重载</h3>
<p><code>inst.reload(options);</code></p>
<ul>
<li>参数 <code>options</code> : 基础属性配置项。<a href="index.html#options">#详见属性</a></li>
</ul>
<p>通过渲染返回的实例对象，可获得重载方法，用于实现对实例的属性重载。</p>
<pre><code class="layui-code">var inst = carousel.render(options); // 轮播初始渲染
inst.reload(options); // 轮播重载
</code></pre>
<p>详细用法可参考：<a href="index.html#demo">#示例</a></p>
<h2 id="options" lay-toc="{level: 2, hot: true}">属性</h2>
<div>
<table class="layui-table">
  <colgroup>
    <col width="150">
    <col>
    <col width="100">
    <col width="100">
  </colgroup>
  <thead>
    <tr>
      <th>属性名</th>
      <th>描述</th>
      <th>类型</th>
      <th>默认值</th>
    </tr> 
  </thead>
  <tbody>
    <tr>
<td>elem</td>
<td>
<p>绑定元素选择器或 DOM 对象</p>
</td>
<td>string/DOM</td>
<td>-</td>
    </tr>
    <tr>
<td>width</td>
<td>
<p>设定轮播容器宽度，值支持：<em class="layui-text-em">像素</em>、<em class="layui-text-em">auto</em>、<em class="layui-text-em">百分比</em>。</p>
</td>
<td>string</td>
<td>
<p><code>600px</code></p>
</td>
    </tr>
    <tr>
<td>height</td>
<td>
<p>设定轮播容器高度，值支持的类型同 <code>width</code> 属性</p>
</td>
<td>string</td>
<td>
<p><code>280px</code></p>
</td>
    </tr>
    <tr>
<td>full</td>
<td>
<p>是否全屏轮播</p>
</td>
<td>boolean</td>
<td>
<p><code>false</code></p>
</td>
    </tr>
    <tr>
<td>anim</td>
<td>
<p>轮播切换动画方式。可选值有：</p>
<ul>
<li><code>default</code> 左右切换</li>
<li><code>updown</code> 上下切换</li>
<li><code>fade</code> 渐隐渐显切换</li>
</ul>
</td>
<td>boolean</td>
<td>
<p><code>default</code></p>
</td>
    </tr>
    <tr>
<td>autoplay</td>
<td>
<p>是否自动切换，可选值有：</p>
<ul>
<li><code>true</code> 自动滚动，鼠标移入会暂停、移出重新恢复</li>
<li><code>false</code> 不自动滚动</li>
<li><code>alway</code> 始终自动滚动，不受鼠标移入移出影响 <sup>2.7+</sup></li>
</ul>
</td>
<td>boolean<br>string</td>
<td>
<p><code>true</code></p>
</td>
    </tr>
    <tr>
<td>interval</td>
<td>
<p>自动切换的时间间隔，单位： ms （毫秒），不能低于 800</p>
</td>
<td>number</td>
<td>
<p><code>3000</code></p>
</td>
    </tr>
    <tr>
<td>index</td>
<td>
<p>初始开始的条目下标</p>
</td>
<td>number</td>
<td>
<p><code>0</code></p>
</td>
    </tr>
    <tr>
<td>arrow</td>
<td>
<p>切换箭头默认显示状态，可选值有：</p>
<ul>
<li><code>hover</code> 鼠标悬停显示</li>
<li><code>always</code> 始终显示</li>
<li><code>none</code> 始终不显示</li>
</ul>
</td>
<td>string</td>
<td>
<p><code>hover</code></p>
</td>
    </tr>
    <tr>
<td>indicator</td>
<td>
<p>指示器位置，可选值有：</p>
<ul>
<li><code>inside</code> 显示在容器内部</li>
<li><code>outside</code> 显示在容器外部</li>
<li><code>none</code> 不显示</li>
</ul>
<p>注 : 若设定了 <code>anim: 'updown'</code> ，则 <code>outside</code> 值无效</p>
</td>
<td>string</td>
<td>
<p><code>inside</code></p>
</td>
    </tr>
    <tr>
<td>trigger</td>
<td>
<p>指示器的触发事件</p>
</td>
<td>string</td>
<td>
<p><code>click</code></p>
</td>
    </tr>
    <tr>
<td colspan="4" style="text-align: center"> 
<div id="options.callback" class="ws-anchor">
<p><a href="index.html#options.callback">回调函数</a></p>
</div>
</td>
    </tr>
    <tr>
<td>change <sup>2.7+</sup></td>
<td colspan="3">
<div id="options.change" lay-pid="options" class="ws-anchor">  
轮播切换后的回调函数，返回一个对象参数。
</div>
<pre><code class="layui-code">carousel.render({
  elem: '#id',
  change: function(obj){
    console.log(obj.index); // 当前条目的索引
    console.log(obj.prevIndex); // 上一个条目的索引
    console.log(obj.item); // 当前条目的元素对象
  }
});
</code></pre>
<p>注：在 <code>2.7</code> 之前的版本，需通过 carousel 的 <code>change</code> 事件来实现，如：</p>
<pre><code class="layui-code">var carousel = layui.carousel;
// 轮播渲染
carousel.render(options); 
// 触发轮播切换事件
carousel.on('change(filter)', function(obj){ // filter 对应轮播容器的 lay-filter 属性值
  console.log(obj);
});  
</code></pre>
</td>
    </tr>
  </tbody>
</table>
<h3>贴士</h3>
<blockquote class="layui-elem-quote">
<p>若轮播的填充内容为图片，且 <code>width</code> 或 <code>height</code> 为自适应，那么需动态获取父容器宽高，从而适配父容器。 当浏览器窗口尺寸发生变化时，可在窗口 <code>resize</code> 事件中通过轮播重载来重设宽高值。</p>
</blockquote class="layui-elem-quote">

</div>
<h3 id="goto" lay-toc="{level: 2}">切换 <sup>2.8+</sup></h3>
<p><code>inst.goto(index);</code></p>
<ul>
<li>参数 <code>index</code> : 轮播下标，从 <code>0</code> 开始计算</li>
</ul>
<p>通过渲染返回的实例对象，可获得切换方法，用于实现对轮播的手动定向切换。</p>
<pre><code class="layui-code">var inst = carousel.render(options); // 轮播初始渲染
inst.goto(0); // 轮播切换到第一项
inst.goto(1); // 轮播切换到第二项
</code></pre>

    </div>
    <div class="ws-text-tools">
      
      <a href="https://github.com/layui/layui/edit/2.x/docs/carousel/index.md" rel="nofollow" target="_blank" title="在 Github 上编辑此文档">
        <i class="layui-icon layui-icon-edit"></i>
      </a>
      
    </div>
  </div>
</div>
<div class="ws-menu-bar layui-bg-green layui-hide">
  <i class="layui-icon layui-icon-spread-left"></i>
</div>
  
<div class="layui-footer ws-footer">
  <p>
    Copyright &copy; 2023 <a href="../../../index.html">Layui</a> MIT Licensed</p>
  <p id="LAY-footer-info">
    <a href="https://gitee.com/layui/layui/blob/main/DISCLAIMER.md" rel="nofollow" target="_blank">免责声明</a> 
    <a href="https://github.com/layui/layui/blob/main/LICENSE" rel="nofollow" target="_blank">开源协议</a>
    <a href="https://gitee.com/layui/" target="_blank">开源生态</a>
    <a href="https://codepen.io/layui/pen/bGxZXrd" rel="nofollow" target="_blank">在线测试</a>
    <a href="https://gitee.com/layui/layui/issues" rel="nofollow" target="_blank">社区交流</a>
  </p>
  <p>
    <span>
      鸣谢：
      <a href="https://www.upyun.com/?invite=SJ0wu6g2-&referer=layui" target="_blank" sponsor="upyun" style="color: #23A7E8;">
        <strong>又拍云</strong>
      </a>
      <a href="https://gitee.com/?referer=layui" target="_blank" sponsor="Gitee" style="color:#C71D23;">
        <strong>Gitee</strong>
      </a>
      <a href="https://www.iconfont.cn/?referer=layui" target="_blank" sponsor="Gitee" style="color: #9B16FF;">
        <strong>iconfont</strong>
      </a>
    </span>
  </p>
</div>
<div class="ws-shade"></div>
 
<script src="/public/layui/v/2.8.6/layui.js"></script>
<script>
layui.config({
  base: '//res.sentcss.com/static/dist/docs/2.8/modules/',
  version: '16',
  res: '//res.sentcss.com/static/dist/docs/',
  curl: ''
}).use('global',function(w){w.a||w.r&&w.r()});
</script>
 
<script>
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "https://hm.baidu.com/hm.js?363b2abe8678eec8a6850500ea63a63b";
  var s = document.getElementsByTagName("script")[0]; 
  s.parentNode.insertBefore(hm, s);
})();
</script>

</body>
</html>